<template>
  <div>
    <ul class="list-group tolist">
      <li class="list-group-item " v-for="item in todolist" :key="item.id" aria-disabled="true">
        <input type="checkbox" v-model="item.done" >
        <label for="" :class="[item.done ? 'delete' : '',item.done ? 'right' : 'right']" >{{item.task}}</label>
        <span v-if="item.done==false" class="badge badge-warning" >未完成</span>
        <span v-else class="badge badge-success">完成</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TodoList",
  props:{
   todolist:{
     type:Array,
    required:true,
    default:[]
   }
  }
};
</script>

<style lang="less">
.tolist {
  width: 300px;
  margin-top: 5px;
 
}
.delete{
  text-decoration: line-through;
  color: gray;
  font-style: italic;
}
 .right{
   margin-right: 5px;
 }
</style>